<template>
  <div id="app">
    <van-nav-bar title="TodoList"></van-nav-bar>
    <van-cell-group>
      <van-field id="text" v-model="text" placeholder="请输入内容" @keyup.enter="Commit">
        <van-button slot="button" type="info" @click="Commit">提交</van-button>
      </van-field>
    </van-cell-group>
    <p>待完成列表项:</p>
    <van-list style="min-height:250px;">
      <TodoItem
        v-for="(item,index) in list"
        :key="index"
        :index="index"
        :item="item"
        :action="'done'"
        @CheckClickEvent="CheckClickEvent(arguments)"
        @DelClickEvent="DelClickEvent(arguments)"
      />
    </van-list>
    <!-- 上边框 -->
    <div class="van-hairline--top"></div>
    <p>已完成列表项:</p>
    <TodoItem
      v-for="(item,index) in dolist"
      :key="index"
      :index="index"
      :item="item"
      :action="'undo'"
      @CheckClickEvent="CheckClickEvent(arguments)"
      @DelClickEvent="DelClickEvent(arguments)"
    ></TodoItem>
  </div>
</template>

<script>
import TodoItem from "@/components/TodoItem";

export default {
  data() {
    return {
      text: "",
      list: [],
      dolist: [],
    };
  },
  components: {
    TodoItem,
  },
  methods: {
    Login() {
      let username = "aaa",
        password = "1";
      console.log(this.token);
      //debugger;

      this.Post(
        "login",
        `userName=${username}&passWord=${password}`,
        null,
        response => {
          console.log(response.data);
          this.token = response.data.Data.token;
          console.log(this.token);
          this.GetList();
        }
      );
    },
    GetList() {
      this.Get(
        "list",
        {
          headers: {
            Authorization: "Bearer " + this.token,
          },
        },
        response => {
          console.log(response.data);
          this.list = response.data.list;
          this.dolist = response.data.dolist;
        }
      );
    },
    Commit() {
      if (this.text != "") {
        let _this = this,
          vtext = _this.text;
        _this.Post("commit", `content=${vtext}`,{
           headers: {
            Authorization: "Bearer " + this.token,
          }
        }, response => {
          console.log(response.data);
          if (response.data) {
            _this.list.push({
              Id: _this.text.length + 1,
              Content: vtext,
              IsDone: false,
            });
            _this.notify("你添加了：" + vtext);
          }
        });
      } else {
        this.notify("你添加了个寂寞！", "warning");
      }
      this.text = "";
    },
    CheckClickEvent(param) {
      let action = param[0],
        index = param[1];
      this.IsDoneCheck(action, index);
    },
    DelClickEvent(param) {
      let index = param[0];
      this.Del(index);
    },
    IsDoneCheck(action, index) {
      let _this = this;
      let item = _this.list[index];
      if (action != "done") {
        item = _this.dolist[index];
      }
      _this.Get(
        "IsDone",
        {
          params: {
            id: item.Id,
            isdone: action == "done" ? true : false,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            Authorization: "Bearer " + this.token,
          },
        },
        response => {
          console.log(response.data);
          if (response.data) {
            if (action != "done") {
              _this.dolist.splice(index, 1);
              _this.list.push(item);
              _this.notify(`你取消完成了：` + item.Content);
            } else {
              _this.list.splice(index, 1);
              _this.dolist.push(item);
              _this.notify(`你完成了：` + item.Content);
            }
          }
        }
      );
    },
    Del(index) {
      let _this = this;
      const item = _this.list[index];
      _this.Post(
        "Del",
        `id=${item.Id}`,
        {
          headers: {
            Authorization: "Bearer " + this.token,
          },
        },
        response => {
          console.log(response.data);
          if (response.data) {
            _this.list.splice(index, 1);
            _this.notify("你删除了：" + item.Content);
          }
        }
      );
    },
    notify(msg, type = "success") {
      this.$notify({ type: type, message: msg });
    },
    Get(url, data, callback) {
      this.$http
        .get("api/todolist/" + url, data)
        .then(function(response) {
          if (callback) callback(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    Post(url, data, headers, callback) {
      this.$http
        .post("api/todolist/" + url, data, headers)
        .then(function(response) {
          if (callback) callback(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
  mounted() {
    this.Login();
  },
  created() {},
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#app {
  font-size: 16px;
  font-family: "Microsoft YaHei";
  height: 100%;
}

.red {
  color: red;
  text-decoration: line-through;
}

.del {
  float: right;
  padding-right: 30px;
  cursor: pointer;
  color: red;
}

p {
  padding-left: 5%;
}
</style>